<template>
  <!--赵雄伟 商品库存-->
  <div>
    <el-row>
      <el-col span="2">
        <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    商品状态<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">上架</el-dropdown-item>
            <el-dropdown-item command="b">下架</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col span="2">
        <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    商品类别<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">烟酒糖茶</el-dropdown-item>
            <el-dropdown-item command="b">家居家纺</el-dropdown-item>
            <el-dropdown-item command="c">服饰鞋帽</el-dropdown-item>
            <el-dropdown-item command="c">办公用品</el-dropdown-item>
            <el-dropdown-item >其他入库</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col span="6">
        <el-input
          placeholder="请输商品名称或编码"
          v-model="input"
          clearable>
        </el-input>
      </el-col>
      <el-col span="1">
        <el-button icon="el-icon-search" circle></el-button>
      </el-col>
      <el-col span="2" offset="11">
        <el-button>导出</el-button>
      </el-col>
    </el-row>
    <br>
    <el-row >
      <el-col span="24">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          header-align="center">
          <el-table-column
            fixed
            prop="esNum"
            label="商品编码"
            width="140"
          >
          </el-table-column>
          <el-table-column
            prop="esStore"
            label="商品名称"
            width="140">
          </el-table-column>
          <el-table-column
            prop="esType"
            label="所属门店"
            width="140">
          </el-table-column>
          <el-table-column
            prop="esAmount"
            label="库存上限"
            width="140">
          </el-table-column>
          <el-table-column
            prop="esHandle"
            label="库存下限"
            width="140">
          </el-table-column>
          <el-table-column
            prop="esMakeListPerson"
            label="预售数量"
            width="140">
          </el-table-column>
          <el-table-column
            prop="esMakeListDate"
            label="在途数量"
            width="140">
          </el-table-column>
          <el-table-column
            prop="auditStatus"
            label="库存数量"
            width="140">
          </el-table-column>
          <el-table-column
            prop="auditStatus"
            label="可用库存"
            width="140">
          </el-table-column>
          <el-table-column
            prop="operation"
            label="操作"
            width="118">
            <el-row>
              <el-col span="2" >
                <el-button size="mini" round  @click="dialogVisible  = true">修改</el-button><br>
              </el-col>
            </el-row>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col span="10" :offset="4">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
     <el-row>
       <el-col span="5" offset="2">
         <font size="3">库存上限：</font>
       </el-col>
       <el-col span="14">
         <el-input
           v-model="input"
           clearable>
         </el-input>
       </el-col>
     </el-row>
      <br>
      <el-row>
        <el-col span="5" offset="2">
          <font size="3">库存下限：</font>
        </el-col>
        <el-col span="14">
          <el-input
            v-model="input"
            clearable>
          </el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import ElSelectDropdown from "_element-ui@2.15.0@element-ui/packages/select/src/select-dropdown";
  export default {
    name: "Stock",
    components: {ElSelectDropdown},
    methods: {
      handleClick(row) {
        console.log(row);
      }
    },
    data() {
      return {
        input: '',
        tableData: [{
          esNum: 'RK123456789',
          esStore: '武侯店',
          esType: '采购入库',
          esAmount: '1000',
          esHandle: '小王',
          esMakeListPerson: '小王',
          esMakeListDate: '2021-1-1',
          auditStatus: '待审核'
        }, {
          esNum: 'RK123456789',
          esStore: '武侯店',
          esType: '采购入库',
          esAmount: '1000',
          esHandle: '小王',
          esMakeListPerson: '小王',
          esMakeListDate: '2021-1-1',
          auditStatus: '待审核'
        }, {
          esNum: 'RK123456789',
          esStore: '武侯店',
          esType: '采购入库',
          esAmount: '1000',
          esHandle: '小王',
          esMakeListPerson: '小王',
          esMakeListDate: '2021-1-1',
          auditStatus: '待审核'
        }, {
          esNum: 'RK123456789',
          esStore: '武侯店',
          esType: '采购入库',
          esAmount: '1000',
          esHandle: '小王',
          esMakeListPerson: '小王',
          esMakeListDate: '2021-1-1',
          auditStatus: '待审核'
        }],
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        dialogVisible:false
      }

    },
    methods: {
      handleCommand(command) {
        this.$message('click on item ' + command);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }

    }
  }
</script>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
